<template>
    <main id="content">
        <router-view ></router-view>
        <footer class="mainfooter" v-if="!$route.meta.hidden">
            <van-tabbar route active-color="#e54847">
              <van-tabbar-item replace to="/home" icon="home-o">首页</van-tabbar-item>
              <van-tabbar-item replace to="/kind" icon="apps-o">分类</van-tabbar-item>
              <van-tabbar-item replace to="/cart" icon="shopping-cart-o">购物车</van-tabbar-item>
              <van-tabbar-item replace v-if="userState" to="/user" icon="friends-o">我的</van-tabbar-item>
              <van-tabbar-item replace v-else to="/login" icon="friends-o">未登录</van-tabbar-item>
            </van-tabbar>
        </footer>
        <div class="tip">请将屏幕竖向显示</div>
    </main>
</template>

<script>
import Vue from 'vue'
import Vuex from 'vuex'
import { Tabbar, TabbarItem } from 'vant'
Vue.use(Tabbar)
Vue.use(TabbarItem)
Vue.use(Vuex)
export default {
  data () {
    return {
    }
  },
  computed: {
    userState () {
      return this.$store.state.userState
    }
  }
}
</script>

<style lang="stylus">
*
  margin 0
  padding 0
html,body,#content
  height 100%
.tip
  position fixed
  width 100vw
  height 100vh
  background-color rgba(0,0,0,0.2)
  display: none
  font-size 1.875rem
  justify-content center
  align-items center
  color red
  font-weight 800
@media (orientation: landscape)
  .tip {
      display: flex;
  }
#content
  display flex
  flex-direction column
  .mainfooter
    box-shadow 0 2px 5px 0px #000
    height 50px
    z-index 1
</style>
